<template>
	<view class="hot-detail">
		<view class="detail-content">
			<view class="title">热搜详情</view>
			<view class="detail-item">
				<view class="label">热搜标题：</view>
				<view class="value">{{ hotDetail.title }}</view>
			</view>
			<!-- 假设我们有更多的字段需要展示，如发布时间、来源等 -->
			<view class="detail-item">
				<view class="label">发布时间：</view>
				<view class="value">{{ hotDetail.publishTime }}</view>
			</view>
			<view class="detail-item">
				<view class="label">来源：</view>
				<view class="value">{{ hotDetail.source }}</view>
			</view>
			<!-- 根据实际数据结构添加更多详情 -->
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onLoad
	} from 'vue';
	import {
		CONFIG
	} from '../../utils/config';

	// 响应式变量，存储热搜详情数据
	const hotDetail = ref({});

	// 页面加载时获取热搜详情数据
	onLoad((options) => {
		getHotDetail(options.id);
	});

	// 获取热搜详情数据
	async function getHotDetail(id) {
		try {
			const response = await uni.request({
				url: `${CONFIG.weibo_url}/hot/${id}`, // 假设后端提供了根据id获取详情的接口
				method: 'GET',
			});
			if (response.statusCode === 200 && response.data) {
				hotDetail.value = response.data; // 假设返回的数据是对象格式
			} else {
				throw new Error('Failed to fetch hot detail');
			}
		} catch (error) {
			console.error('Error fetching hot detail:', error);
			// 处理错误，例如显示提示信息
		}
	}
</script>

<style scoped>
	.hot-detail {
		padding: 15px;
	}

	.detail-content {
		background-color: #fff;
		border-radius: 10px;
		padding: 20px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	}

	.title {
		font-size: 24px;
		font-weight: bold;
		color: #333;
		margin-bottom: 20px;
	}

	.detail-item {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}

	.label {
		font-size: 16px;
		color: #666;
		margin-right: 10px;
	}

	.value {
		font-size: 16px;
		color: #333;
	}
</style>